<template>
  <div class="login-box">
    <div class="header-box">
      <img v-if="!isDark" class="logo-svg" src="@/assets/svg/logo_light.svg"></img>
      <img v-else class="logo-svg" src="@/assets/svg/logo_dark.svg"></img>
      <span class="title-txt"> {{ $t('login.admin') }}</span>
    </div>
    <!-- 切换栏 -->
    <div class="switch-box" v-if="[0, 1].includes(mode)" :style="{ width: locale == 'zh' ? '145px' : '225px' }">
      <div class="switch-item-box" @click="mode = 0" :style="{
        background: mode == 0 ? 'var(--yu-div-bg1)' : '',
        color: mode == 1 ? 'var(--el-text-color-secondary)' : ''
      }">{{ $t('login.switchA') }}
      </div>
      <div class="switch-item-box" @click="mode = 1" :style="{
        background: mode == 1 ? 'var(--yu-div-bg1)' : '',
        color: mode == 0 ? 'var(--el-text-color-secondary)' : ''
      }">{{ $t('login.switchB') }}
      </div>
    </div>
    <!-- 账号密码区 -->
    <Motion key="account" v-if="mode == 0" :initial="{
      opacity: 0.7,
      filter: 'blur(5px) brightness(0.8)'
    }" :animate="{
      opacity: 1,
      filter: 'blur(0px) brightness(1)'
    }" :exit="{
      opacity: 0,
      filter: 'blur(5px) brightness(0.8)'
    }" :transition="{
      duration: 0.5,
      ease: [0.25, 0.1, 0.25, 1]
    }">
      <el-form class="user-pwd-form" ref="userPwdFormRef" :model="userPwdForm" :rules="userPwdRules" label-width="auto">
        <el-form-item prop="username">
          <el-input v-model="userPwdForm.username" style="height: 40px;" :placeholder="$t('login.username')"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" show-password v-model="userPwdForm.password" style="height: 40px;"
            :placeholder="$t('login.password')"></el-input>
        </el-form-item>
        <el-form-item prop="validCode" class="valid-code-box">
          <el-input v-model="userPwdForm.gorMAuthCode" style="width: 120px; height: 40px;"
            :placeholder="$t('login.validCode')"></el-input>
          <el-image @click="refreshCodeImg()" :src="validCodeData?.base64" style="cursor: pointer;width: 120px; height: 40px;" fit="fill"
            :lazy="true"></el-image>
        </el-form-item>
        <!-- 操作区 -->
        <div class="operator-box">
          <div class="rember-forget-box">
            <el-checkbox :checked="sysStore.remberUserPwdLogin != null" @change="changeRember">{{ $t('login.remberMe')
            }}</el-checkbox>
            <div @click="mode = 3" class="forget-txt">{{ $t('login.forgetPwd') }}</div>
          </div>
          <div class="btn-box">
            <el-button class="btn-item" @click="loginUserPwd">{{ $t('login.login') }}</el-button>
            <el-button @click="mode = 2" style="width: 45%; height: 40px;">{{ $t('login.register') }}</el-button>
          </div>
        </div>
      </el-form>
    </Motion>
    <!-- 手机号区 -->
    <Motion key="mobile" v-if="mode == 1" :initial="{
      opacity: 0.7,
      filter: 'blur(5px) brightness(0.8)'
    }" :animate="{
      opacity: 1,
      filter: 'blur(0px) brightness(1)'
    }" :exit="{
      opacity: 0,
      filter: 'blur(5px) brightness(0.8)'
    }" :transition="{
      duration: 0.5,
      ease: [0.25, 0.1, 0.25, 1]
    }">
      <el-form class="user-pwd-form" ref="phoneFormRef" :model="phoneForm" :rules="phoneFormRules" label-width="auto">
        <el-form-item prop="phoneNumber">
          <el-input v-model="phoneForm.phoneNumber" style="height: 40px;" :placeholder="$t('login.switchB')"></el-input>
        </el-form-item>
        <el-form-item prop="phoneCode">
          <VerificationCode @complete="handleComplete" />
        </el-form-item>
        <!-- 操作区 -->
        <div class="operator-box">
          <div class="btn-box">
            <el-button class="btn-item" style="width: 100%;" @click="loginPhone">{{ $t('login.login') }}</el-button>
          </div>
        </div>
      </el-form>

    </Motion>
    <!-- 注册区 -->
    <Motion key="mobile" v-if="mode == 2" :initial="{
      opacity: 0.7,
      filter: 'blur(5px) brightness(0.8)'
    }" :animate="{
      opacity: 1,
      filter: 'blur(0px) brightness(1)'
    }" :exit="{
      opacity: 0,
      filter: 'blur(5px) brightness(0.8)'
    }" :transition="{
      duration: 0.5,
      ease: [0.25, 0.1, 0.25, 1]
    }">
      <el-form class="user-pwd-form" ref="registerFormRef" :model="registerForm" :rules="registerFormRules"
        label-width="auto">
        <el-form-item prop="username">
          <el-input v-model="registerForm.username" style="height: 40px;"
            :placeholder="$t('login.username')"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" show-password v-model="registerForm.password" style="height: 40px;"
            :placeholder="$t('login.password')"></el-input>
        </el-form-item>
        <PasswordStrengthBar :password="registerForm.password"></PasswordStrengthBar>
        <el-form-item prop="rePassword">
          <el-input type="password" show-password v-model="registerForm.rePassword" style="height: 40px;"
            :placeholder="$t('login.rePassword')"></el-input>
        </el-form-item>
        <el-form-item prop="validCode" class="valid-code-box">
          <el-input v-model="registerForm.gorMAuthCode" style="width: 120px; height: 40px;"
            :placeholder="$t('login.validCode')"></el-input>
          <el-image :src="validCodeData?.base64" @click="refreshCodeImg" style="cursor: pointer;width: 120px; height: 40px;" fit="fill"
            :lazy="true"></el-image>
        </el-form-item>
        <!-- 操作区 -->
        <div class="operator-box">
          <div class="btn-box">
            <el-button class="btn-item" @click="registerUserPwd()">{{ $t('login.register') }}</el-button>
            <el-button @click="mode = 0" style="width: 45%; height: 40px;">{{ $t('login.back') }}</el-button>
          </div>
        </div>
      </el-form>
    </Motion>
    <!-- 忘记密码区 -->
    <Motion key="mobile" v-if="mode == 3" :initial="{
      opacity: 0.7,
      filter: 'blur(5px) brightness(0.8)'
    }" :animate="{
      opacity: 1,
      filter: 'blur(0px) brightness(1)'
    }" :exit="{
      opacity: 0,
      filter: 'blur(5px) brightness(0.8)'
    }" :transition="{
      duration: 0.5,
      ease: [0.25, 0.1, 0.25, 1]
    }">
      <el-form class="user-pwd-form" ref="forgetPwdFormRef" :model="forgetPwdForm" :rules="forgetPwdFormRules"
        label-width="auto">
        <el-form-item prop="username">
          <el-input v-model="forgetPwdForm.username" style="height: 40px;"
            :placeholder="$t('login.username')"></el-input>
        </el-form-item>
        <el-form-item prop="phoneNumber">
          <el-input v-model="forgetPwdForm.phoneNumber" style="height: 40px;"
            :placeholder="$t('login.switchB')"></el-input>
        </el-form-item>
        <el-form-item prop="phoneCode">
          <VerificationCode @complete="handleCompleteByForget" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" show-password v-model="forgetPwdForm.password" style="height: 40px;"
            :placeholder="$t('login.password')"></el-input>
        </el-form-item>
        <PasswordStrengthBar :password="forgetPwdForm.password"></PasswordStrengthBar>
        <el-form-item prop="rePassword">
          <el-input type="password" show-password v-model="forgetPwdForm.rePassword" style="height: 40px;"
            :placeholder="$t('login.rePassword')"></el-input>
        </el-form-item>
        <!-- 操作区 -->
        <div class="operator-box">
          <div class="btn-box">
            <el-button class="btn-item" @click="updatePwd()">{{ $t('login.editPwd') }}</el-button>
            <el-button @click="mode = 0" style="width: 45%; height: 40px;">{{ $t('login.back') }}</el-button>
          </div>
        </div>
      </el-form>
    </Motion>
  </div>

</template>

<script setup lang="ts">
import { AnimatePresence, Motion } from 'motion-v'
import { useSysStore } from '@/store';
import { useI18n } from 'vue-i18n'
import { useDark } from '@vueuse/core';
import type { FormInstance, FormRules } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import VerificationCode from './VerificationCode.vue';
import PasswordStrengthBar from './PasswordStrengthBar.vue';
import type {
  ValidCodeData, UserPwdForm, PhoneForm,
  RegisterForm, ForgetPwdForm
} from '../types'
import emiter from '@/utils/bus';
const emit = defineEmits(['login-user-pwd', 'refresh-code-img', 'register-user-pwd'])
const refreshCodeImg = () => {
  emit('refresh-code-img')
}
const props = defineProps<{
  validCodeData: ValidCodeData
}>()

const { locale } = useI18n()
const phoneCode = ref('') // 手机验证码
const handleComplete = (val: any) => {
  phoneForm.phoneCode = val
}
const handleCompleteByForget = (val: any) => {
  forgetPwdForm.phoneCode = val
}
const sysStore = useSysStore()
const isDark = useDark()
const mode = ref(0) // 0 账号密码 1 手机号 2 注册 3 忘记密码

const userPwdFormRef = ref<FormInstance>()
const phoneFormRef = ref<FormInstance>()
const forgetPwdFormRef = ref<FormInstance>()
const userPwdForm = reactive<UserPwdForm>({
  username: 'admin',
  password: 'admin123',
  gorMAuthCode: '',
})
const phoneForm = reactive<PhoneForm>({
  phoneNumber: '',
  phoneCode: ''
})
const registerForm = reactive<RegisterForm>({
  username: '',
  password: '',
  rePassword: '',
  gorMAuthCode: ''
})
const forgetPwdForm = reactive<ForgetPwdForm>({
  username: '',
  phoneNumber: '',
  phoneCode: '', // 手机验证码
  password: '',
  rePassword: ''
})
const userPwdRules = reactive<FormRules<UserPwdForm>>({
  username: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 5, max: 9, message: 'Length should be 5 to 9', trigger: 'change' },
  ],
  password: [
    { required: true, message: 'Please input Activity pwd', trigger: 'blur' },
    { min: 8, max: 30, message: 'Length should be 9 to 30', trigger: 'change' },
  ],
  gorMAuthCode: [
    { required: true, message: 'Please input Activity validCode', trigger: 'blur' },
  ]
})
const phoneFormRules = reactive<FormRules<PhoneForm>>({
  phoneNumber: [
    { required: true, message: 'Please input Activity Phone Number', trigger: 'blur' },
    { min: 11, max: 11, message: 'Length should be 11 to 11', trigger: 'change' },
  ],
  phoneCode: [
    { required: true, message: 'Please input Activity Phone Code', trigger: 'blur' },
    { min: 6, max: 6, message: 'Length should be 6 to 6', trigger: 'change' },
  ],
})

const validateRepassword = (rule: any, value: any, callback: any) => {
   if (registerForm.password != registerForm.rePassword) {
       callback(new Error('两次密码不一致'));
   } else {
       callback();
   }
};

const registerFormRules = reactive<FormRules<RegisterForm>>({
  username: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 5, max: 9, message: 'Length should be 5 to 9', trigger: 'change' },
  ],
  password: [
    { required: true, message: 'Please input Activity pwd', trigger: 'blur' },
    { min: 8, max: 30, message: 'Length should be 9 to 30', trigger: 'change' },
  ],
  rePassword: [
    { required: true, message: 'Please input Activity repwd', trigger: 'blur' },
    { min: 8, max: 30, message: 'Length should be 9 to 30', trigger: 'change' },
    {validator: validateRepassword, trigger: 'blur'}
  ],
  gorMAuthCode: [
    { required: true, message: 'Please input Activity validCode', trigger: 'blur' },
  ]
})



const forgetPwdFormRules = reactive<FormRules<ForgetPwdForm>>({
  username: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 5, max: 9, message: 'Length should be 5 to 9', trigger: 'change' },
  ],
  password: [
    { required: true, message: 'Please input Activity pwd', trigger: 'blur' },
    { min: 8, max: 30, message: 'Length should be 9 to 30', trigger: 'change' },
  ],
  rePassword: [
    { required: true, message: 'Please input Activity repwd', trigger: 'blur' },
    { min: 8, max: 30, message: 'Length should be 9 to 30', trigger: 'change' },
  ],
  phoneNumber: [
    { required: true, message: 'Please input Activity Phone Number', trigger: 'blur' },
    { min: 11, max: 11, message: 'Length should be 11 to 11', trigger: 'change' },
  ],
  phoneCode: [
    { required: true, message: 'Please input Activity Phone Code', trigger: 'blur' },
    { min: 6, max: 6, message: 'Length should be 6 to 6', trigger: 'change' },
  ],
})
const changeRember = (e: any) => {
  sysStore.setIsRemberUserPwd(e)

}
const loginUserPwd = () => {
  // 账号密码登录
  if (sysStore.isRemberUserPwd) {
    sysStore.setRemberUserPwdLogin({
      username: userPwdForm.username,
      password: userPwdForm.password
    })
  } else {
    sysStore.setRemberUserPwdLogin(null)
  }
  emit('login-user-pwd', userPwdForm)
}
const registerUserPwd = () => {
  emit('register-user-pwd', registerForm)

  // 账号密码注册
}
const loginPhone = () => {
  // 手机号登录（自行对接）
}
const updatePwd = () => {
  // 更新密码（自行对接）
}
onMounted(() => {
  if (mode.value == 0) {
    if (sysStore.remberUserPwdLogin) {
      userPwdForm.username = sysStore.remberUserPwdLogin.username
      userPwdForm.password = sysStore.remberUserPwdLogin.password
    }
  }
  emiter.on("onHandleRegisterSuccess", () => {
    mode.value = 0
    userPwdForm.username = registerForm.username
    userPwdForm.password = registerForm.password
  })
})
</script>

<style lang="scss" scoped>
.login-box {
  display: flex;
  flex-direction: column;

  .header-box {
    display: flex;
    align-items: flex-end;

    .title-txt {
      color: var(--el-text-color-primary);
      font-size: 24px;
      font-weight: 700;
      margin-left: 10px;
      margin-bottom: 5px;
    }

    .logo-svg {
      width: 50px;
    }
  }

  .switch-box {
    margin-top: 25px;
    display: flex;
    align-items: center;
    padding: 5px;
    border-radius: 5px;
    background: var(--yu-div-bg2);


    .switch-item-box {
      transition: none !important;
      cursor: pointer;

      padding: 5px;
      border-radius: 5px;
    }
  }
}

.user-pwd-form {
  margin-top: 30px;
  display: flex;
  flex-direction: column;

  .valid-code-box {
    :deep(.el-form-item__content) {
      display: flex !important;
      align-items: center;
      gap: 15px;
    }
  }

  .operator-box {
    display: flex;
    flex-direction: column;

    .rember-forget-box {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .forget-txt {
        margin-top: 5px;
        padding-bottom: 2px;
        cursor: pointer;
      }

      .forget-txt:hover {
        border-bottom: 1px solid;
      }
    }

    .btn-box {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;

      .btn-item {
        height: 40px;
        width: 45%;
        background: var(--el-color-primary);
        color: var(--yu-text-re-color);
      }

      .btn-item:hover {
        color: var(--yu-text-re-hover-color);

        background: var(--el-color-primary-dark-2);
        opacity: 0.9;
      }
    }
  }

}
</style>
